<template>
  <div style="display: flex">
    <div style="flex: 1">
      <m-menu
        :data="data1"
        defaultActive="1"
        name="name"
        index="index"
        icon="icon"
        children="children"
      ></m-menu>
    </div>
    <div style="flex: 1">
      <m-infinite-menu
        :data="data2"
        defaultActive="2"
        active-text-color="skyblue"
        name="a"
        index="b"
        icon="c"
        children="d"
      ></m-infinite-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>

let data1 = [
  {
    name: "导航1",
    index: "1",
    icon: "Document",
  },
  {
    name: "导航2",
    index: "2",
    icon: "Document",
  },
  {
    name: "导航3",
    index: "3",
    icon: "Document",
    children: [
      {
        name: "导航3-1",
        index: "3-1",
        icon: "Document",
      },
    ],
  },
];
let data2 = [
  {
    name: "导航1",
    index: "1",
    icon: "Document",
  },
  {
    name: "导航2",
    index: "2",
    icon: "Document",
  },
  {
    name: "导航3",
    index: "3",
    icon: "Document",
    children: [
      {
        name: "导航3-1",
        index: "3-1",
        icon: "Document",
        children: [
          {
            name: "导航3-1-1",
            index: "3-1-1",
            icon: "Document",
            children: [
              {
                name: "导航3-1-1-1",
                index: "3-1-1-1",
                icon: "Document",
                children: [
                  {
                    name: "导航3-1-1-1-1",
                    index: "3-1-1-1-1",
                    icon: "Document",
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];
</script>

<style lang="scss" scoped>
</style>
